<template>
  <div v-loading="loading">
    <div v-if="!old_vid || !getSql" class="version_list">
      <ul class="cl">
        <li v-for="(item, key) in dkTableData" :key="key" :class="{ choose: old_vid === item.id }" @click="choose(item.id)">
          <p class="version_number">{{ item.number }}</p>
          <p>{{ item.title }}</p>
        </li>
      </ul>
      <!--      分页-->
      <div class="page">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="total"
          :current-page="page"
          :page-size="pageSize"
          @current-change="currentChange"
        />
      </div>
      <el-button type="primary" style="width: 200px" :disabled="!old_vid || vid === old_vid" @click="comparisonSql">确定</el-button>
    </div>
    <div v-else>
      <!--      <h3 style="text-align: center;color: #f00;font-size: 18px;margin: 10px 0;">SQL升级：{{ oldVersion.number }} -> {{ newVersion.number }}</h3>-->
      <el-alert
        class="u-m-b-10"
        description="比较不同版本之间的数据库差异，正式做包的时候尽可能的是新版本和最初的版本进行比对"
        :title="'Sql升级' + oldVersion.number + '->' + newVersion.number"
        type="error"
      />
      <Codemirror v-model:value="code" v-loading="sloading" :options="cmOptions" class="dk-code-mirror" @before-change="edit = true" />
      <div style="text-align: center; margin-top: 20px">
        <el-button type="primary" @click="refresh()">重新比对</el-button>
        <el-tooltip
          class="item"
          effect="dark"
          content="可以合并更新sql内容，默认的更新内容在应用中配置，配置后，点合并即可合并到一起了"
          placement="top-start"
        >
          <el-button type="primary" @click="mergeUpgradeSql()"> 合并更新 </el-button>
        </el-tooltip>
        <el-button :type="edit ? 'warning' : 'primary'" :disabled="!edit" @click="saveUpgradeSql()">{{
          edit ? '已编辑，点击保存' : '未修改'
        }}</el-button>
        <el-button type="danger" @click="downUpgradeSql()">下载upgrade.sql</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { comparisonSql, getList, getUpgradeSql, mergeUpgradeSql, saveUpgradeSql } from '@/api/addons/version'
export default {
  name: 'Comparison',
  props: {
    aid: {
      default: 0,
      type: [Number, String]
    },
    vid: {
      default: 0,
      type: [Number, String]
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      dkTableData: [],
      searchData: {},
      dialogFormVisible: false,
      formWidth: '1000px',
      formData: null,
      loading: true,
      sloading: true,
      old_vid: 0,
      getSql: false,
      sql: {},
      code: null,
      cmOptions: {
        tabSize: 4,
        mode: 'text/x-mysql',
        theme: 'monokai',
        lineNumbers: true,
        line: true
      },
      edit: true,
      newVersion: null,
      oldVersion: null
    }
  },
  computed: {},
  mounted() {
    this.getUpgradeSql()
    this.reset()
  },
  methods: {
    mergeUpgradeSql() {
      mergeUpgradeSql(this.vid).then((res) => {
        this.code = res.data.sql
        this.$message.success(res.msg)
        this.edit = false
      })
    },
    saveUpgradeSql() {
      saveUpgradeSql(this.vid, this.code).then((res) => {
        this.code = res.data.sql
        this.$message.success(res.msg)
        this.edit = false
      })
    },
    choose(id) {
      this.old_vid = id
    },
    reset() {
      this.searchData = {
        aid: this.aid,
        name: '',
        type: ''
      }
      this.getList()
    },
    currentChange(page) {
      this.getList(page)
    },
    getList(page) {
      this.page = page || 0
      getList(this.page, this.pageSize, this.searchData).then((res) => {
        this.dkTableData = res.data
        this.total = parseInt(res.msg)
      })
    },
    comparisonSql() {
      comparisonSql(this.old_vid, this.vid).then((res) => {
        this.getSql = true
        this.code = res.data.sql
        this.newVersion = res.data.new
        this.oldVersion = res.data.old
        this.sloading = false
      })
    },
    getUpgradeSql() {
      getUpgradeSql(this.vid)
        .then((res) => {
          this.code = res.data.sql
          this.newVersion = res.data.new
          this.oldVersion = res.data.old
          this.old_vid = res.data.old.id
          this.getSql = true
          this.loading = false
          this.sloading = false
          this.edit = false
        })
        .catch((res) => {
          this.loading = false
          this.edit = false
        })
    },
    downUpgradeSql() {
      const blob = new Blob([this.code], { type: 'text/plain;charset=utf-8' })
      const downloadLink = document.createElement('a')
      downloadLink.href = window.URL.createObjectURL(blob)
      downloadLink.download = 'upgrade.sql'
      document.body.appendChild(downloadLink)
      downloadLink.click()
      document.body.removeChild(downloadLink)
    },
    refresh() {
      this.code = ''
      this.newVersion = null
      this.oldVersion = null
      this.old_vid = 0
      this.getSql = false
      this.sloading = true
    }
  }
}
</script>

<style scoped lang="scss">
.version_list {
  text-align: center;
  ul {
    height: 300px;
    li {
      width: calc(20% - 20px);
      height: 80px;
      float: left;
      margin: 10px;
      border: 2px solid #ccc;
      border-radius: 10px;
      padding: 10px;
      cursor: pointer;
      text-align: center;
      color: #555;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      &:hover {
        //background: #f5f5f5;
      }
      .version_number {
        font-size: 24px;
      }
      &.choose {
        border: 2px solid #409eff;
      }
    }
  }
}
</style>
